<!-- 主内容区 -->
    <div class="pt-16 pb-8 min-h-screen">
        <div class="container mx-auto px-4">
            <!-- 页面标题 -->
            <div class="mt-8 mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h4 class="text-[clamp(1.2rem,3vw,2rem)] font-bold text-gray-800">第<?= $location["location_order"]?>号 <?= $location["name"]?>研学基地介绍</h4>
                    <p class="text-gray-600 mt-1"><?= $location["description"]?></p>
                    <input type="hidden" id="page_id" value="<?= $location['id'] ?>">
                </div>
            </div>

            <!-- 基地特点图片展示 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/shilunguan_1.png") ?>" alt="石仑关基地全景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/shilunguan_2.jpg") ?>" alt="研学活动场景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/shilunguan_3.jpg") ?>" alt="自然生态环境" class="w-full h-48 object-cover">
                </div>
            </div>

            <!-- 简介和图表左右分列 -->
            <div class="flex flex-col md:flex-row mt-8 mb-6">
                <!-- 简介 -->
                <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl w-full md:w-4/5">
                <h3 class="text-xl font-bold text-gray-800 mb-2">简介</h3>
                <div class="text-gray-600 space-y-4">
                    <p class="text-indent-8">&emsp;&emsp;石仑关梦想小镇基地核心区 1000 余亩，能同时接待 1000人以上学生的劳动实践教育活动，被评为湖南省中小学劳动教育实践基地，长沙市中小学生劳动与实践教育基地，是宁乡唯一的省市双基地。</p>
                    <p class="text-indent-8">&emsp;&emsp;课程</p>
                    <p class="text-indent-8">&emsp;&emsp;游学体验：孩儿立志出乡关、游学寻梦，树立梦想、突遇暴雨，穿越民国、为梦想，雄关漫道战长征、中华儿女多奇志，不爱红装爱武装、授人以渔、夯土体验，打好人生基础、我为红军送粮食（田间趣味运动会）。</p>
                </div>
            </div>

                <!-- 图表 -->
                <div class="w-full md:w-1/3 p-6">
                    <canvas id="myChart"></canvas>
                </div>
            </div>

            <!-- 亮点内容 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <h3 class="text-xl font-bold text-gray-800 mb-2">亮点内容</h3>
                <!-- 可根据实际情况替换或补充亮点 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">1. 独特的文化体验</h4>
                    <p class="text-gray-600">&emsp;&emsp;石仑关梦想小镇保留了丰富的传统文化元素，孩子们可以在这里深入了解传统文化的魅力。</p>
                </div>
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">2. 丰富的户外活动</h4>
                    <p class="text-gray-600">&emsp;&emsp;小镇周边有优美的自然环境，提供了徒步、露营等多种户外活动，让孩子们亲近自然。</p>
                </div>
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">3. 特色手工制作</h4>
                    <p class="text-gray-600">&emsp;&emsp;孩子们可以参与特色手工制作活动，如陶艺、木工等，锻炼动手能力。</p>
                </div>
            </div>

            <!-- 石仑关梦想小镇研学基地一日研学课程安排 -->
            
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">【石仑关梦想小镇研学基地一日研学课程安排】</h2>
    <div class="overflow-x-auto">
        <table class="w-full border-collapse">
            <colgroup>
                <col style="width: 12%;"> <!-- 时间列 -->
                <col style="width: 20%;"> <!-- 环节列 -->
                <col style="width: 68%;"> <!-- 环节介绍列 -->
            </colgroup>
            <thead>
                <tr class="bg-gray-50">
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">时间</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节介绍</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">上午</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">游学第一站-梦想开营 孩儿立志出乡关</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">1. 各班整队，研学辅导员和教官对接；</p>
                        <p class="mb-2">2. 总教官致欢迎词；</p>
                        <p class="mb-2">3. 升国旗、奏唱国歌；</p>
                        <p class="mb-2">4. 授旗仪式；</p>
                        <p class="mb-2">5. 向梦想宣誓；</p>
                        <p>6. 集体合影。</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">上午</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">游学第二站-突遇暴雨 穿越民国</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">游学茶馆课程说明：茶馆老板与学生互动式教学，讲述毛泽东当年游学的故事。</p>
                        <p class="mb-2">结束后学生更换服装、打卡纪念，并齐诵《少年中国说》，拍班级团队集体照。</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">上午</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">游学第三站-放飞梦想 绽放青春 或 百步穿杨 武能正义（二选一）</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">飞盘运动课程说明：在飞盘运动中，既可以锻炼我们的身心，有助于促进心肺健康，又能增强专注能力，团队协助能力。</p>
                        <p class="mb-2">射箭课程说明：“欲文明其精神，先自野蛮其体魄”。1917年毛泽东在《新青年》上发表了著名的《体育之研究》，号召国人强身健体。同学们来到劳动教育园射箭区域，老师讲解射箭的来历及安全注意事项，工作人员按组分发弓箭。分组体验射箭活动（小学低年级改为投）</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">中午</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">午餐</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p>享用自备午餐</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">下午</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">游学第四站-中华儿女多奇志，不爱红装爱武装 或 罗马炮架、快乐发（二选一）</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">手榴弹投掷+扫雷体验课程说明：在当今这个和平社会，青少年仍然要加强自身本领，时刻准备着保家卫国，不忘历史，方能体会当下幸福的来之不易。本课堂将带领同学们体验扫雷及手榴弹投掷，让同学们不仅学到新的知识和能力，锻炼身体，更是体验那一段激情燃烧的岁月。</p>
                        <p class="mb-2">罗马炮架课程说明：本课程带领学生动手体验建造罗马炮架，学习古代战争历史，并且将“愤怒的小鸟”游戏融入其中，让学生在体验中寓教于乐，培养团队荣誉感和竞争意识。</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">下午</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">游学第五站-汉服剪纸 体悟民族文化</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">汉服剪纸课程说明：同学们将在老师的指导下，自己动手完成剪纸作品，作品成型后将变成一个美丽的书签，将会陪伴我们今后很长的一段读书时光</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center align-top">下午</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">游学第六站-梦想启航 寄梦未来</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">1. 总导师闭营致辞；</p>
                        <p class="mb-2">2. 观看《我不想做这样的人》视频，强化激发同学们的梦想；</p>
                        <p class="mb-2">3. 给每一个学生佩戴梦想徽章，发放梦想证书（人数多以班级为单位发放）；</p>
                        <p class="mb-2">4. 总教官公布各班得分，颁发卓越班级，梦想班级，优秀班级奖状；</p>
                        <p>5. 返程，教官列队送别。</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

            <!-- 结尾 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <p class="text-gray-600">小朋友们，石仑关梦想小镇的奇妙之旅已经准备好啦！这里有文化、有游乐、有特色，每一个项目都超好玩、超有趣！快来石仑关梦想小镇，一起开启这场超棒的研学冒险，收获满满的快乐和知识吧！</p>
            </div>
        </div>
    </div>

      <script>
        // 获取canvas元素
        const ctx = document.getElementById('myChart').getContext('2d');
        // 定义图表数据
        const data = {
          labels: ['知识性', '美观度', '体验感', '历史性', '安全性'],
          datasets: [{
            label: '基地能力',
            backgroundColor: 'rgba(153, 0, 51, 0.2)',
            borderColor: 'rgba(153, 0, 51, 1)',
            borderWidth: 2,
            data: [8, 7, 9, 9, 7] // 这里的数据可根据实际情况修改，代表各维度的评分
          }]
        };
        // 定义图表配置
        const options = {
          scale: {
            min: 1,             // 最小值设为1
            beginAtZero: true,
            steps: 10,
            stepValue: 1,
            max: 10
          },
          elements: {
            line: {
              // tension: 0.4
            }
          }
        };
        // 创建雷达图实例
        const myChart = new Chart(ctx, {
          type: 'radar',
          data: data,
          options: options
        });

        // 页面加载时记录开始时间
        let startTime = null;

        // 监听页面加载事件，记录开始时间
        window.addEventListener('load', function () {
            startTime = Date.now();
        });

        // 监听页面即将卸载事件，记录结束时间并发送停留时间到后端
        window.addEventListener('beforeunload', function () {
            recordPageStay();
        });

        function recordPageStay() {
            if (startTime === null) return; // 如果开始时间未记录，则不进行后续操作
            let endTime = Date.now();
            let duration = Math.floor((endTime - startTime) / 1000);

            fetch('/record-stay-activity/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ pageId: document.getElementById('page_id').value, duration: duration })
            })
           .then(response => response.json())
           .then(data => console.log(data));

            startTime = null; // 重置开始时间，避免重复计算
        }
      </script>